<template>
    <article class="cmp cmp-decode-single">
        <section class="content-wrapper">
            <div :class="['content-left', codeType]">
                <img v-if="imgUrl" :src="imgUrl" ref="imgObj" />
                <div v-else class="nodata">将图片拖拽或粘贴到此处</div>
                <div class="mask" @drop.prevent="filesDrop" @dragover.prevent @paste.stop="pasteHandler"></div>
            </div>
            <div class="content-right">
                <textarea v-model="content" placeholder="识别结果" readonly></textarea>
            </div>
        </section>
        <section class="btn-wrapper">
            <x-button type="primary" block @click="decode">识 别</x-button>
        </section>
    </article>
</template>

<script>
let QrScanner = global.QrScanner || null
let BarcodeReader = global.BarcodeReader || null
// let Quagga = global.Quagga || null

export default {
    name: 'cmp-decode-single',
    props: {
        codeType: {
            type: String,
            default: 'qrcode'
        }
    },
    data() {
        return {
            file: '',
            imgUrl: '',
            content: '',
        }
    },
    mounted() {
        this.bindEvent()
    },
    beforeDestroy() {
        this.removeEvent()
    },
    methods: {
        bindEvent() {
            window.addEventListener('resize', this.decode)
            BarcodeReader.Init()
            BarcodeReader.SetImageCallback((result) => {
                if (!result.length) {
                    this.content = ''
                    this.$toast('条形码读取失败')
                    return
                }
                this.content = (result[0] || {}).Value || ''
            })
        },
        removeEvent() {
            window.removeEventListener('resize', this.decode)
        },
        // 拖拽待处理文件
        filesDrop(e) {
            const filesList = e.dataTransfer.files
            if (!filesList) return
            this.file = filesList[0]
            this.imgUrl = window.URL.createObjectURL(this.file)
            this.content = ''
        },
        // 粘贴图片
        pasteHandler(e) {
            console.log(e)
            let items = (e.clipboardData || {}).items
            if (!items) return
            for (let i = 0; i < items.length; i++) {
                let item = items[i]
                if (item.kind === 'file' && /^image\//.test(item.type)) {
                    let file = item.getAsFile()
                    if (file.size > 0) {
                        this.file = file
                        this.imgUrl = window.URL.createObjectURL(this.file)
                        this.content = ''
                        break
                    }
                }
            }
        },
        // 解码
        decode() {
            if (!this.imgUrl) {
                this.$toast('请选择要解码的图片后再试')
                return
            }
            this.content = ''
            if (this.codeType === 'barcode') {
                this.decodeBarcode()
            } else {
                this.decodeQrcode()
            }
        },
        // 二维码解码
        decodeQrcode() {
            QrScanner.scanImage(this.file).then(result => {
                this.content = result
            }).catch(error => {
                console.log(error || 'No QR code found.')
                this.content = ''
                this.$toast('未找到二维码')
            })
        },
        // 条形码解码
        decodeBarcode() {
            if (!this.$refs.imgObj) return
            BarcodeReader.DecodeImage(this.$refs.imgObj)
            // Quagga.decodeSingle({
            //     src: this.imgUrl,
            //     numOfWorkers: navigator.hardwareConcurrency || 0, // Needs to be 0 when used within node
            //     decoder: {
            //         readers: ['code_128_reader'] // List of active readers
            //     },
            // }, (result) => {
            //     if (result.codeResult) {
            //         this.content = result.codeResult.code
            //     } else {
            //         this.content = ''
            //         this.$toast('未找到编码数据')
            //     }
            // })
        },
    }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";

.cmp-decode-single {
    height: calc(100% - 3em - 64px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .content-wrapper {
        display: flex;
        height: 20vw;

        .content-left,
        .content-right {
            border: 1px solid #e6e6e6;
            background-color: #fff;
        }

        .content-left {
            width: 20vw;
            background-color: #fff;
            position: relative;
            .flex-center;

            &.barcode {
                width: 40vw;
            }

            img {
                max-width: 100%;
                max-height: 100%;
            }
            .mask {
                .absolute-fullscreen;
                z-index: 2;
            }
        }

        .content-right {
            width: 0;
            flex-grow: 1;
            margin-left: 1em;
            position: relative;

        }

        textarea {
            width: 100%;
            height: 100%;
            font-size: 16px;
            padding: 18px 24px;
            border: none;
            outline: 0;
            resize: none;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    }

    .btn-wrapper {
        margin-top: 1em;
    }
}
</style>
